.files {
  max-height: 100%;
  display: flex;
  flex-flow: wrap;
  min-width: 500px;
  overflow-y: auto;
  // padding: 10px;
  margin-left: -5px;

  .error {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    color: #FF0000;
    font-size: 12px;
    width: 100%;
    height: 100%;
  }

  .loading {
    display: flex;
    // align-items: center;
    justify-content: center;
    font-style: italic;
    color: #AAA;
    font-size: 12px;
    width: 100%;
    height: 100%;
  }

  .file {
    cursor: pointer;
    width: 250px;
    max-height: 192px;
    //height: 190px;
    display: inline-flex;
    flex-direction: column;
    white-space: nowrap;
    //cursor: pointer;
    //border: 1px solid #E6E6E6;
    border: 1px solid #EEE;
    border-radius: 5px;
    // margin: 10px;
    margin: 5px;
    overflow: hidden;

    &:hover {
      outline: 1px solid #DDD;

      .btns {
        visibility: visible !important;
      }
    }

    .snap {
      height: 140px;
      background-color: #FAFAFA;
      display: flex;
      justify-content: center;
      align-items: center;
      //border-radius: 3px;
      position: relative;

      > img {
        max-width: 240px;
        max-height: 130px;
        //clip: rect(0px 79px 154px 0px);
      }

      .shared {
        position: absolute;
        right: 11px;
        top: 5px;

        svg {
          max-width: 14px;

          path {
            fill: #777;
          }
        }
      }

      .icon {
        width: 32px;
        height: 32px;
        svg {
          width: 32px;
          height: 32px;
        }
        img {
          width: 32px;
          height: 32px;
        }
      }
  
      .largeIcon {
        width: 140px;
        height: 100%;
        svg {
          width: 140px;
          height: 100%;
        }
        img {
          width: 140px;
          height: 100%;
        }
      }
    }

    .tt {
      height: 50px;
      display: flex;
      padding: 5px 6px 0 6px;
      background-color: #fff;

      .typeIcon {
        padding: 0 7px 0 6px;

        svg {
          max-width: 18px;
          width: 18px;
          height: 18px;
        }
        img {
          max-width: 18px;
          width: 18px;
          height: 18px;
        }
      }

      .detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .name {
          font-size: 12px;
          font-weight: 800;
        }

        .path {
          font-size: 12px;
          //margin-top: 2px;
          /* padding: 10px 10px 5px 10px; */
          color: #AAA;
          /* text-overflow: ellipsis; */
          /* width: 100%; */
          overflow: hidden;
          //text-overflow: ellipsis;
          white-space: nowrap;
          display: flex;
          //justify-content: flex-end;
          position: relative;
          height: 22px;
          //background-image: linear-gradient(transparent, #EEE);
        }
      }

      .btns {
        visibility: hidden;
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
          max-width: 18px;

          path {
            fill: #777;
          }
        }
      }

      .menu {
        position: relative;

        svg {
          max-height: 14px;
        }
      }
    }
  }

  .empty {
    font-style: italic;
    color: #aaa;
  }
}
